import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Col, Divider, Row, Statistic } from 'antd';
import ReactEcharts from 'echarts-for-react';
import RcResizeObserver from 'rc-resize-observer';
import { useEffect, useState } from 'react';
import BASE_API_PATH from '../../../config/staticUrl'
const Index = () => {
  const [globalEventSource, setGlobalEventSource] = useState<EventSource>();

  const getOption = (cpu: number) => {
    return {
      series: [
        {
          type: 'gauge',
          axisLine: {
            lineStyle: {
              width: 30,
              color: [
                [0.3, '#67e0e3'],
                [0.7, '#37a2da'],
                [1, '#fd666d'],
              ],
            },
          },
          pointer: {
            itemStyle: {
              color: 'auto',
            },
          },
          axisTick: {
            distance: -30,
            length: 8,
            lineStyle: {
              color: '#fff',
              width: 2,
            },
          },
          splitLine: {
            distance: -30,
            length: 30,
            lineStyle: {
              color: '#fff',
              width: 4,
            },
          },
          axisLabel: {
            color: 'inherit',
            distance: 40,
            fontSize: 20,
          },
          detail: {
            valueAnimation: true,
            formatter: '{value} %',
            color: 'inherit',
          },
          data: [
            {
              value: cpu,
            },
          ],
        },
      ],
    };
  };

  const [monitorDisplay, setMonitorDisplay] = useState({
    cpuDisplay: getOption(0),
  });

  const [systemMonitor, setSystemMonitor] = useState<SystemMonitorEntity>({
    cpuUsage: 0,
    jvmUsedMemory: 0,
    jvmMaxMemory: 0,
    diskMax: 0,
    systemMaxMemory: 0,
    systemUsedMemory: 0,
  });

  /**
   * 获取系统内存、磁盘、jvm相关信息
   */
  const getSystemMonitor = () => {
    const eventSource = new EventSource(`${BASE_API_PATH}/system/monitor`);
    eventSource.onmessage = (event) => {
      const eventData = JSON.parse(event.data);
      if (eventData && eventData.code === 200) {
        //   console.log("data",eventData.data)
        // setSystemMonitor({
        //   ...eventData.data,
      }
      console.log(eventData?.data?.systemCpuLoad);
      setSystemMonitor({
        ...eventData?.data,
      });
      setMonitorDisplay({
        cpuDisplay: getOption(eventData?.data?.systemCpuLoad || getOption(0)),
      });
    };
    eventSource.onerror = (error) => {
      console.error('Error occurred:', error);
    };
    setGlobalEventSource(eventSource);
  };

  useEffect(() => {
    getSystemMonitor();

    return () => {
      globalEventSource?.close();
    };
  }, []);
  const [responsive, setResponsive] = useState(false);

  return (
    <>
      <PageContainer title={false}>
        <RcResizeObserver
          key="resize-observer"
          onResize={(offset) => {
            setResponsive(offset.width < 596);
          }}
        >
          <ProCard.Group title="核心指标" direction={responsive ? 'column' : 'row'}>
            <ProCard>
              <Statistic
                title="CPU占用"
                value={systemMonitor?.cpuUsage}
                precision={2}
                suffix={'%'}
              />
            </ProCard>
            <Divider type={responsive ? 'horizontal' : 'vertical'} />
            <ProCard>
              <Statistic
                title="JVM内存"
                value={systemMonitor?.jvmUsedMemory}
                precision={2}
                suffix={'/ ' + systemMonitor?.jvmMaxMemory + 'G'}
              />
            </ProCard>
            <Divider type={responsive ? 'horizontal' : 'vertical'} />
            <ProCard>
              <Statistic title="磁盘总量" value={systemMonitor?.diskMax} suffix={'G'} />
            </ProCard>
            <Divider type={responsive ? 'horizontal' : 'vertical'} />
            <ProCard>
              <Statistic
                title="系统内存"
                value={systemMonitor?.systemUsedMemory}
                suffix={'/ ' + systemMonitor?.systemMaxMemory + 'G'}
              />
            </ProCard>
          </ProCard.Group>
        </RcResizeObserver>
        <ProCard title="卡片组展开" ghost gutter={8} collapsible>
          <ProCard layout="center" bordered>
            {JSON.stringify(monitorDisplay?.cpuDisplay)}
          </ProCard>
          <ProCard layout="center" bordered>
            <ReactEcharts option={monitorDisplay?.cpuDisplay} />
          </ProCard>
          <ProCard layout="center" bordered>
            <ReactEcharts option={monitorDisplay?.cpuDisplay} />
          </ProCard>
        </ProCard>
        <Row>
          <Col>
            <ReactEcharts option={monitorDisplay?.cpuDisplay} />
          </Col>
        </Row>
      </PageContainer>
    </>
  );
};

export default Index;
